<template>
  <!-- <div class="dashboard-container ddiv-style">
    <div class="dashboard-text">name: {{ name }}</div>
  </div> -->
  <div>
    <div id="bingzhuangtu" class="divst"></div>
    <div id="bingzhuangtu2" class="divst">你好</div>
    <div id="bingzhuangtu3" class="divst">你好</div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import * as echarts from "echarts";
export default {
  name: "Dashboard",
  data() {
    return {
      option: {
        title: {
          text: "入住人数",
        },
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [],
            type: "line",
            smooth: true,
          },
        ],
      },option2: {
        title: {
          text: "入住情况",
        },
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [

          {
            label: {
              show: true,
              position: 'top'
            },
            data: [],
            type: "bar",
            smooth: true,
          },
        ],
      },option3: {
        title: {
          text: "房间分类情况",
        },
        xAxis: {
          type: "category",
          data: [],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            label: {
              show: true,
              position: 'top'
            },
            data: [],
            type: "bar",
            smooth: true,
          },
        ],
      },
    };
  },
  mounted() {
    this.tu();
    this.tu2();
    this.tu3();

  },
  methods: {
    async tu() {
      let result = await this.$API.user.reqfindstAll();
      if (result.code == 20000) {
        this.option.xAxis.data = result.data.name;
        this.option.series[0].data = result.data.data;
      }
      this.ks();
    },
    ks() {
      let myChart = echarts.init(document.querySelector("#bingzhuangtu"));
      myChart.setOption(this.option);
    },

    async tu2() {
      let result = await this.$API.user.reqfindstAllTable();
      if (result.code == 20000) {
        this.option2.xAxis.data = result.data.name;
        this.option2.series[0].data = result.data.data;
      }
      this.ks2();
    },
    ks2() {
      let myChart2 = echarts.init(document.querySelector("#bingzhuangtu2"));
      myChart2.setOption(this.option2);
    },

    async tu3() {
      let result = await this.$API.user.findallType();
      if (result.code == 20000) {
        this.option3.xAxis.data = result.data.name;
        this.option3.series[0].data = result.data.data;
      }
      this.ks3();
    },
    ks3() {
      let myChart3 = echarts.init(document.querySelector("#bingzhuangtu3"));
      myChart3.setOption(this.option3);
    },
  },
  computed: {
    ...mapGetters(["name"]),
  },
};
</script>

<style lang="scss" scoped>
.divst {
  width: 100%;
  height: 350px;
}
.ddiv-style {
  width: 100%;
  height: 100%;
  margin: -20px -20px;
  position: absolute;
  /* background-image: url(); */
  margin: 0px;
  background: url("../../assets/jdq.png") no-repeat;
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  background-attachment: fixed;
  /* 让背景图基于容器大小伸缩 */
  background-size: cover;
  /* 设置背景颜色，背景图加载过程中会显示背景色 */
  background-color: #464646;
}
.dashboard {
  // &-container {
  //   margin: 30px;
  // }
  // &-text {
  //   font-size: 30px;
  //   line-height: 46px;
  // }
}
</style>
